<style lang="less">
  .sidebar {
    display: flex;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    .el-menu--collapse {
      .el-submenu__icon-arrow {
        display: none;
      }
      .el-submenu__title span {
        display: none;
      }
    }
    &::-webkit-scrollbar {
      width: 0;
    }
    .el-menu:not(.el-menu--collapse) {
      width: 250px;
    }
    .aside-root {
      background-color: #464c5b;
      box-sizing: border-box;
      padding-top: 20px;
      height: 100%;
    }
    .aside-root-item {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 60px;
      color: #fff;
      flex-wrap: wrap;
      padding: 0 10px;
      margin-top: 15px;
      div {
        text-align: center;
        font-size: 14px;
      }
      img {
        width: auto;
      }
      .selected {
        position: absolute;
        right: 0;
        top: 40%;
      }
    }
    .el-menu-vertical {
      position: relative;
      min-height: 100%;
      width: 190px;
      background-color: #eaedf1;
      .my-menu-title {
        height: 50px;
        line-height: 50px;
        background-color: #f2f2f2;
        border-bottom: 0.5px solid #ccc;
        color: #999;
        text-align: center;
      }
      .el-menu {
        background: transparent;
      }
      .menu-item-defalt {
        list-style: inside;
      }
    }
  }
</style>
<template>
  <div class="sidebar">
    <el-aside width="auto" class="aside-root">
      <div v-for="(menu,index) in curMenu" :key="index" class="aside-root-item" @click.stop="onMenu(index)">
        <img class="i" src="/images/common/i-home.png">
        <div> {{ menu.name }}</div>
        <img v-show="index===activeIndex" class="selected" src="/images/common/i-selected.png">
      </div>
    </el-aside>
    <div class="el-menu-vertical">
      <div class="my-menu-title">{{ curMenu[activeIndex].name }}</div>
      <el-menu :default-active="activeRoute" router :unique-opened="true">
        <template v-for="item in routes">
          <el-menu-item
            :key="item.path"
            :index="resolvePath(item.path)"
            background-color="#eaedf1"
            text-color="#666"
            ctive-text-color="#f73b42"
            class="menu-item-defalt"
          >
            <span slot="title">{{ item.meta.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script>
import bus from '@/bus'
import path from 'path'
export default {

  data() {
    return {
      collapse: false,
      activeIndex: 0
    }
  },
  computed: {
    curRoute() {
      console.log('curRoute=>', this.$route.path)
      return this.$route.matched[0].path || '/'
    },
    curRoutes() {
      const curRoute = this.curRoute
      return this.$router.options.routes.filter(item => item.path === curRoute)[0]
    },
    curMenu() {
      const curRoutes = this.curRoutes
      console.log('curRoutes=>', curRoutes)
      return curRoutes.meta.menu
    },
    routes() {
      const curTag = this.curMenu[this.activeIndex].tag
      return this.curRoutes.children.filter(e => e.meta.tag === curTag)
    },
    activeRoute() {
      return this.$route.path
    }
  },
  created() {
    console.log('--------------side bar index-------------')
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg
      bus.$emit('collapse-content', msg)
    })
  },
  methods: {
    onMenu(index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
    },
    resolvePath(routePath) {
      return path.resolve(this.curRoute, routePath)
    }
  }
}
</script>

